<template>
  <div class="component component--layout layout--C1">
    <section style="width:100%;">
      <header class="header header--secondary" v-if="props.usNewsData.author !== null">
        <h2 class="title">
          <a class="link" >{{ props.usNewsData.author }}</a>
        </h2>
        <p class="paragraph">
          {{ props.summary }}
        </p>
      </header>
    </section>

    <div class="column column--primary">
      <div class="element  element--article" v-for="(item) in props.usNewsData.news" :key="item.uuid">
        <figure class="article__figure">
          <router-link :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }"
            class="figure__image disableShadowBox">
            <img v-if="item.imgUrl == null" src="../../../assets/noimg.png" />
            <img :src="item.imgUrl" v-else />
          </router-link>
        </figure>
        <div class="article__content">
          <h3 class="article__headline">
            <a class="link">
              <router-link :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }">
                {{ item.title }}
              </router-link>
            </a>
          </h3>
          <div class="content--secondary" v-if="item.company">
            <div class="group group--tickers">
              <router-link :class="[props.usNewsData.news < 0 ? 'negative' : 'positive']"
                :to="{ name: 'stockDetail', params: { symbol: item.company } }">
                <span class="ticker__symbol">{{ item.company }}</span>
                <bg-quote :class="[item.ticketChange < 0 ? 'negative' : 'positive']"><span class="neutral">{{
                  item.ticketChange
                    }}</span></bg-quote>
                <i class="icon" v-if="item.company !== null"></i>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps(["usNewsData",]);
</script>
<style scoped lang="scss">
.positive {
  span {
    color: #367f2e;
  }
}

.paragraph {
  padding: 0;
}

.negative {
  span {
    color: #b51a28;
  }
}
</style>
